<template>
<div class="box">
 {{ id }}

 <div>
  {{ user }}
 </div>
 <div>
  {{ msg }}
 </div>

 <div>
    
     {{ list }}
 </div>

 <button @click="clickHandle">给父组件传值</button>
</div>
</template>
<script setup lang='ts'> 
 import { UserInfo } from '@/apis/userinfo/type';
import {ref,reactive,defineProps,withDefaults,defineEmits} from 'vue';

const emit= defineEmits(['sendData']);


 

//   const props= defineProps(["id","user"]); //数组形式

// const props= defineProps({
//     id:{
//         type:Number,
//         default:""
//     },
//     user:{
//         type:Object,
//         default:""
//     }
// })

// console.log(props.user);

 interface IData{
    id:number,
    msg:string,
    user?:UserInfo,
    list:string[]

 }

//  withDefaults(defineProps<类型>(),默认值)  //默认如果是一个引用类型数据  必须是一个函数 函数的返回值就是默认值

const props= withDefaults(defineProps<IData>(),{
    id:0,
    msg:"你好，世界",
    user:()=>({name:"张三",age:18}), //引用类型，默认值 必须是一个函数
    list:()=>["a","b"] //引用类型，默认值 必须是一个函数
})

const title=ref("北京欢迎您");
const clickHandle=()=>{
    
    emit("sendData",title.value);
}
 
  
</script>
<style scoped lang='less'>
.box{
    width: 100%;
    height: 300px;
    background-color: skyblue;
}
</style>